<template>
   <div id="register">
     <div class="register-header">
      <span @click="returnTo">
        <i class="iconfont icon-fanhui"></i>
      </span>
    </div>
    <div class="register-title">
      手机号注册
    </div>
    <form class="register-form">
      <div>
        <label>手机号 </label>
        <input type="number" v-model="phone">
      </div>
      <div>
        <label>设置密码 </label>
        <input v-model="password" type="text">
      </div>
      <div>
        <label>确定密码 </label>
        <input v-model="password2" type="text">
      </div>
      <div v-show="this.tips" class="register-form-tips">{{ tips }}</div>
      <div>
        <button @click="register">注册</button>
      </div>
    </form>
   </div>
</template>
<script>
export default {
   name: 'SamRegister',
   data() {
     return {
       phone:'',
       password:"",
       password2:'',
       tips:''
     }
   },
   methods:{
    returnTo(){
      this.$router.back()
    },
    // 对收集的手机号和密码进行校验和提示（表单验证）
    checkSubmit(){
      const phone = this.phone
      const psw = this.password
      const psw2 = this.password2
      const phoneReg =  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      const pswReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,14}$/
      this.tips = ''
      if(!phoneReg.test(phone)){
        this.tips = "您输入的手机号不正确！"
        return false
      }
      if(psw.length <5 || psw.length > 14){
        this.tips = '密码必须在6-14位数之间'
        return false
      }
      if(!psw.match(pswReg)){
        this.tips = '密码必须是数字和字母组成'
        return false
      }
      if(psw !== psw2){
        this.tips = '请重新确认您的密码！'
        return false
      }
      return true
    },
    register(){
      this.tips = ''
      if(this.checkSubmit()){
        localStorage.setItem(this.phone,this.password)
        this.$notify({type:'success',text:'注册成功'})
        this.$router.replace({name:'login',query:{phone:this.phone}})
      }
    }

   }
};
</script>
<style lang='less' scoped>
#register{
  .register-header{
    margin-left: 1rem;
    margin-top: 1rem;
    .iconfont{
      font-size: 2rem;
    }
  }
  .register-title{
    margin: 2rem;
    font-size: 2.5rem;
  }
  .register-form{
    margin-left: 2rem;
    div{
      margin-bottom: 1rem;
      &:last-child{
        margin-top: 5rem;
        button{
          width: 10rem;
          background-color: skyblue;
        }

      }
    }
    label{
      font-size: 1.5rem;
    }
    input{
      border: none;
      background-color:rgb(249, 247, 247);
      &:focus{
        outline: none;
      }
    }
    .register-form-tips{
      width: 16rem;
      color: red;
      font-size: 1.3rem;
      border: 0.1rem solid red;
      position: absolute;
    }
  }
  
}
</style>